<template>
  <view class="card-container">
    <view
        v-for="card in cards"
        :key="card.title"
        class="card-item"
        :style="{ background: card.gradient }"
    >
      <!-- 动态波浪背景 -->
      <view class="wave-bg">
        <view class="wave"></view>
        <view class="wave wave-delay"></view>
        <view class="wave wave-delay-2"></view>
      </view>

      <!-- 卡片内容 -->
      <view class="card-content">
        <text class="card-title">{{ card.title }}</text>
        <text class="card-count">{{ card.count }}</text>Pices
      </view>

      <!-- 右上角图标 -->
      <image :src="card.icon" class="card-icon" />
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue';

const cards = reactive([
  {
    title: '今日上新',
    count: '15',
    gradient: 'linear-gradient(135deg, #E63946, #FF6F61)',
    icon: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/01/13eaf29a0a51a942a2aec480c23e9c1f7f60ec7d88-be8c-47f5-a7f6-e2043269ad6f.jpeg',
  },
  {
    title: '今日降价',
    count: '8',
    gradient: 'linear-gradient(135deg, #1D3557, #457B9D)',
    icon: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/01/138d667cb8367b4d769f89b5716637060b下降趋势.png',
  },
  {
    title: '今日下架',
    count: '5',
    gradient: 'linear-gradient(145deg, #F4A261, #FFD166)',
    icon: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/01/13d30d8516bdb64b7caae3c90aa3dbf2cd下架.png',
  },
  {
    title: '新增留言',
    count: '12',
    gradient: 'linear-gradient(145deg, #2A9D8F, #4CAF50)',
    icon: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/01/13d4ac7d1ee79441ddbb67966fd3e3f753w_留言.png',
  },
]);
</script>

<style lang="scss" scoped>
.card-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列布局 */
  gap: 20rpx;
  margin-bottom: 40rpx;
}

.card-item {
  position: relative;
  height: 200rpx;
  border-radius: 20rpx;
  padding: 15rpx 30rpx;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 4rpx 8rpx rgba(156, 156, 156, 0.6);
}

.card-content {
  display: flex;
  flex-direction: column;

  .card-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 35rpx;
    padding-left: 20rpx;
    border-left: 6rpx solid #ffffff;
  }

  .card-count {
    font-size: 50rpx;
    font-weight: bold;
  }
}

.card-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
}

/* 动态波浪背景 */
.wave-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 50%;
  overflow: hidden; /* 裁剪 */
}

.wave {
  position: absolute;
  width: 150%;
  height: 150%; /* 高度覆盖足够大 */
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: wave-animation 8s infinite ease-in-out;
  transform: translateY(50%); /* 只保留椭圆底部 */
}

.wave-delay {
  animation-delay: 4s;
}

.wave-delay-2 {
  animation-delay: 8s;
}

@keyframes wave-animation {
  0% {
    transform: translateX(-270%) translateY(50%) scale(1);
  }
  25% {
    transform: translateX(-180%) translateY(50%) scale(1.2);
  }
  50% {
    transform: translateX(0%) translateY(50%) scale(1.2);
  }
  75% {
    transform: translateX(80%) translateY(50%) scale(1.2);
  }
  100% {
    transform: translateX(270%) translateY(50%) scale(1);
  }
}
</style>
